<template>
<el-card class="box-card">
    <!--查询-->
    <el-form :inline="true" class="demo-form-inline">
        <!-- <el-form-item>
        <el-input v-model="title2" placeholder="姓名" size="small"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="query()" size="small">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="reset()" size="small">重置</el-button>
      </el-form-item> -->
        <el-form-item>
            <el-button type="primary" icon="el-icon-circle-plus" @click="add()" size="small">添加房型</el-button>
        </el-form-item>
    </el-form>
    <!--表格-->
    <el-table :data="tableData" v-loading="loading" :border="true" style="width: 100%; margin: 0px 0px 20px 0px">
        <el-table-column label="id" prop="id"></el-table-column>
        <el-table-column label="房型" prop="room_name"></el-table-column>
        <el-table-column label="房价" prop="room_price"></el-table-column>
        <el-table-column label="会员价" prop="member_price"></el-table-column>
        <el-table-column label="押金" prop="earnest"></el-table-column>

        <el-table-column label="操作" fixed="right" width="200">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    <!--弹框-->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="38%" @close="cancel()">
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="70px" class="demo-dynamic">
            <el-form-item prop="house_type" label="房型" :rules="[{ required: true, message: '请填写房型', trigger: 'blur' }]">
                <el-input v-model="dynamicValidateForm.house_type" @input="change($event)"></el-input>
            </el-form-item>
            <el-form-item prop="price" label="房价" :rules="[
            { required: true, message: '请填写价格', trigger: 'blur' },
            { type: 'number', message: '价格必须为数字值' },
          ]">
                <el-input v-model.number="dynamicValidateForm.price"></el-input>
            </el-form-item>
            <el-form-item prop="member_price" label="会员价" :rules="[
            { required: true, message: '请填写价格', trigger: 'blur' },
            { type: 'number', message: '价格必须为数字值' },
          ]">
                <el-input v-model.number="dynamicValidateForm.member_price"></el-input>
            </el-form-item>
            <el-form-item prop="earnest" label="押金" :rules="[
            { required: true, message: '请填写定金', trigger: 'blur' },
            { type: 'number', message: '定金必须为数字值' },
          ]">
                <el-input v-model.number="dynamicValidateForm.earnest"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button type="primary" @click="confirm()" size="medium">确 定</el-button>
        </span>
    </el-dialog>
</el-card>
</template>

<script>
import {
    house_type_list,
    house_type_add,
    house_type_edit,
    house_type_del,
} from "@/api/house_type";
export default {
    name: "questionlist",

    data() {
        return {
            title2: "",
            currentPage: 1,
            total: 1,
            page: 1,
            limit: 10,
            dialogVisible: false,
            loading: true,
            title: "添加用户",
            // 表格
            tableData: [],
            //表单
            dynamicValidateForm: {
                house_type: "",
                price: "",
                member_price: "",
                earnest: "",
                id: "",
            },
            //角色列表
            roleList: [],
        };
    },
    created() {
        this.getList();
    },
    methods: {
        change() {
            this.$forceUpdate();
        },
        //分页
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.limit = val;
            this.getList();
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.page = val;
            this.getList();
        },
        //表格数据请求
        async getList() {
            this.loading = true;
            var data = await house_type_list({
                page: this.page,
                limit: this.limit,
            });

            if (data.code == 20000) {
                this.loading = false;
                // console.log(data);
                this.tableData = data.data;
                this.total = data.total;
            }
        },
        //表格重置
        reset() {
            this.title2 = "";
            this.getList();
        },
        query() {
            this.getList();
        },
        add() {
            this.title = "添加房型";
            this.dialogVisible = true;
        },
        cancel() {
            this.dialogVisible = false;
            this.$refs.dynamicValidateForm.resetFields();
            this.dynamicValidateForm.house_type = "";
            this.dynamicValidateForm.price = "";
            this.dynamicValidateForm.earnest = "";
            this.dynamicValidateForm.member_price = "";
            this.dynamicValidateForm.id = "";
        },
        confirm() {
            this.$refs.dynamicValidateForm.validate(async (valid) => {
                // console.log(this.dynamicValidateForm);
                // console.log(this.dynamicValidateForm.name);
                // console.log(this.dynamicValidateForm.id);
                // console.log(this.dynamicValidateForm.id != "");
                if (valid) {
                    if (this.dynamicValidateForm.id != "") {
                        //编辑
                        const data = await house_type_edit({
                            house_type: this.dynamicValidateForm.house_type,
                            price: this.dynamicValidateForm.price,
                            earnest: this.dynamicValidateForm.earnest,
                            id: this.dynamicValidateForm.id,
                            member_price: this.dynamicValidateForm.member_price,
                        });
                        // console.log(data);
                        if (data.code === 20000) {
                            this.dialogVisible = false;
                            this.$message.success("修改成功");
                            this.getList();
                        } else {
                            this.$message.error("修改失败");
                        }
                        // this.dialogVisible = false;
                    } else {
                        //添加
                        const data = await house_type_add({
                            house_type: this.dynamicValidateForm.house_type,
                            price: this.dynamicValidateForm.price,
                            earnest: this.dynamicValidateForm.earnest,
                            member_price: this.dynamicValidateForm.member_price,
                        });
                        // console.log(data);
                        if (data.code === 20000) {
                            this.dialogVisible = false;
                            this.$message.success("添加成功");
                            this.getList();
                        } else {
                            this.$message.error("添加失败");
                        }
                    }
                }
            });
        },
        //操作
        handleEdit(index, row) {
            this.title = "修改房型";
            // console.log(index, row);
            this.dialogVisible = true;
            this.dynamicValidateForm.house_type = row.room_name;
            this.dynamicValidateForm.price = row.room_price;
            this.dynamicValidateForm.earnest = row.earnest;
            this.dynamicValidateForm.id = row.id;
            this.dynamicValidateForm.member_price = row.member_price;
        },
        handleDelete(index, row) {
            // console.log(index, row);
            this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                const data = await house_type_del({
                    id: row.id,
                });
                // console.log(data);
                if (data.code === 20000) {
                    this.dialogVisible = false;
                    this.$message.success("删除成功");
                    this.getList();
                } else {
                    this.$message.error("删除失败");
                }
            });
        },
    },
};
</script>

<style scoped>
.box-card {
    margin: 20px;
}
</style>
